<!DOCTYPE html>
<html lang="en">
<head>
<link href="./pyeditor_js/prettify.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="./pyeditor_js/prettify.js"></script>
<title>Console Log</title>
</head>
<body>

<div id="editor">

</div>
<button onclick="refresh()">Refresh</button>
<script src="./pyeditor_js/jquery-1.7.2.min.js"></script>
<script src="./pyeditor_js/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
    var componentId;
    var code;
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/monokai");
    editor.getSession().setMode("ace/mode/python");
    editor.setAutoScrollEditorIntoView();
    editor.setOption("maxLines", 25);
    editor.setOption("minLines", 50);
    editor.commands.addCommand({
      name: 'myCommand',
      bindKey: {win: 'Ctrl-B',  mac: 'Command-M'},
      exec: function(editor) {
          var run_button = document.getElementById("run_button");
          run_button.click();
      },
    });

    function refresh(){
      requestComponent(componentId);
    }

    function requestComponent(id){
      componentId = id;
      var http = new XMLHttpRequest();
            var url = '/components/' + id + '?step=0';
            http.onreadystatechange = function(){
                if(http.readyState == 4 && http.status == 200){
                    var data = http.responseText;
                    var jsoncontent = JSON.parse(data)
                    props = jsoncontent['properties'];
                    for(i in props){
                      p = props[i];
                      if(p['name'] == 'buf'){
                        v = p['value'];
                        code = v;
                        editor.setValue(code);
                      }
                    }
                } else {

                }
            }
            http.open("GET", url);
            http.send(null);
    }
</script>
</body>
</html>